<script setup>
// 组件引入
import accountLogin from './accountLogin.vue'
import PhoneLogin from './phone_login.vue'
// 函数方法的引入
import { ref, defineEmits } from 'vue'
import { tabs } from '@/assest/data/login_tabs.js'
import { Avatar, Iphone } from '@element-plus/icons-vue'
import eventBus from '@/utils/eventBus.js'

const tabValue = ref("acount"); // 当前的选择的tab
const emit = defineEmits(['getTabValue']);
eventBus.on('getCurrentTab', function() {
    emit('getTabValue', tabValue.value);
})
</script>

<template>
  <div class="tabs">
    <el-tabs type="border-card" stretch v-model="tabValue">
        <template v-for="item in tabs" :key="item.icon">
            <el-tab-pane :name="item.name">
                <template #label>
                    <span class="custom-tabs-label">
                        <el-icon v-if="item.icon === 'Avatar'"><Avatar /></el-icon>
                        <el-icon v-else><Iphone /></el-icon>
                        <span class="title">{{ item.title }}</span>
                    </span>
                </template>
                <!-- 账号登录内容 -->
                <template v-if="item.icon === 'Avatar'">
                    <account-login />
                </template>
                <!-- 手机号登录 -->
                <template v-else>
                   <phone-login />
                </template>
            </el-tab-pane>
        </template>
    </el-tabs>
  </div>
</template>

<style scoped lang="less">
 .tabs {
    text-align: left;
    .custom-tabs-label {
        display: flex;
        align-items: center;
        .title {
            margin-left: 5px;
        }
    }
}
</style>